import React, { PureComponent } from 'react'
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { Select, Button } from 'antd'
import dayjs from 'dayjs';
import PageBackHeader from "@common/PageBackHeader";
import { DISTRIBUTE_SCENES, DISTRIBUTE_SCENES_STATUS } from '@constants/ActivityListMap'
import { getCouponDistributionWithStats } from '@sagas/marketing'
import marketArrayParams from '@utils/marketArrayParams'
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
import { getHistoryMatchParams } from "@utils/setUrlQuery";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import DistributionModal from '@components/marketing/modal/DistributionModal'

@withRouter
@connect(({ marketing }) => ({
    couponDistributionStats: marketing.couponDistributionStats,
}), {
    getCouponDistributionWithStats,
}
)
class MarketingCouponDistribution extends PureComponent {
    constructor(props) {
        super(props);
        const { id } = getHistoryMatchParams(props)
        const {
            status = '',
        } = getQuery(props.history)
        this.state = {
            id,
            status
        }

        this.tableRef = React.createRef()
        this.distributionModalRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)
        this.addDistribution = this.addDistribution.bind(this)

        this.paginationInfo = {}
        this.columns = [{
            dataIndex: 'executed',
            key: 'executed',
            title: '投放时间',
            render: (text, record) => dayjs(record.self.executed).format('YYYY-MM-DD HH:mm:ss')
        }, {
            dataIndex: 'distribute_scene',
            key: 'distribute_scene',
            title: '类型',
            render: (text, record) => DISTRIBUTE_SCENES_STATUS[record.self.distribute_scene]
        }, {
            dataIndex: 'status',
            key: 'status',
            title: '状态',
            render: (text, record) => record.self.is_executing ? '投放中' : (record.self.is_executed ? '已投放' : '未投放')
        }, {
            dataIndex: 'cnt',
            key: 'cnt',
            title: '投放量',
            render: (text, record) => record.stat.distributed_cnt
        }, {
            dataIndex: 'creator',
            key: 'creator',
            title: '领取量',
            render: (text, record) => record.stat.got_cnt
        },{
            dataIndex: 'creator',
            key: 'creator',
            title: '使用量',
            render: (text, record) => record.stat.use_cnt
        } ]
    }

    handleValueChange(key, value) {
        this.setState({
            [key]: value
        }, this.initTable)
    }

    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { status, id} = this.state
        const params = {
            pageNo: current,
            pageSize,
            coupon_id:id
        }
        if (status) {
            params.distribute_scenes = marketArrayParams(status)
        }
        this.props.getCouponDistributionWithStats(params)
        this.setUrlQuery()
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    setUrlQuery() {
        const { status } = this.state
        const { history } = this.props
        let params = { status}
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    addDistribution(){
        const { id } = this.state
        this.distributionModalRef.current?.show({
            id 
        })
    }

    render() {
        const { status } = this.state
        const { couponDistributionStats } = this.props
        return (
            <div className='bilin-web'>
                <PageBackHeader title={'投放记录'} />
                <div className='bilin-web-body coupon-distribution-page'>
                    <div className='table-scroll-container'>
                        <div className="table-params page-params flex-row-between mgb-16">
                            <div className="flex-vertical-center">
                                <Button onClick={this.addDistribution} type="primary" className="button-small mgr-16">新增投放</Button>
                            </div>
                            <div className="flex-vertical-center">
                                <Select
                                    style={{ width: '140px' }}
                                    onChange={this.handleValueChange.bind(this, 'status')}
                                    value={status}
                                >
                                    <Select.Option key="" value="">全部类型</Select.Option>
                                    {DISTRIBUTE_SCENES.map(item => {
                                        return (<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)
                                    })}
                                </Select>
                            </div>
                        </div>
                        <CustomizeTableProvide ref={this.tableRef} tableKey="couponList" onChange={this.getTableInfo}>
                            <div className="table-list">
                                <CustomizeTable
                                    columns={this.columns}
                                    dataSource={couponDistributionStats.rows || []}
                                />
                            </div>
                            <div className="table-pagination">
                                <CustomizeTablePagination
                                    total={couponDistributionStats.total}
                                />
                            </div>
                        </CustomizeTableProvide>
                        <DistributionModal callback={this.getTableInfo} ref={this.distributionModalRef} />
                    </div>
                </div>
            </div>
        )
    }
}

export default MarketingCouponDistribution